<template>
	<view id="reg_index" :data-theme="themeStyle">
		<view class="header-wrap">
			<view class="title">{{ $lang('registered') }}</view>
			<view class="regisiter-agreement">
				<text class="color-tip">{{ $lang('haveAnAccount') }},</text>
				<text class="color-base-text" @click="toLogin">{{ $lang('logInImmediately') }}</text>
			</view>
		</view>
		<view class="header-reg">
			<view class="reg-tab">
				<view :class="['tab',tabIndex == 1?'tab-act':'']" @click="setTab(1)">{{ $lang('phone') }}</view>
				<view :class="['tab',tabIndex == 2?'tab-act':'']" @click="setTab(2)">{{ $lang('email') }}</view>
			</view>
		</view>
		<view class="body-wrap">
			<view class="form-wrap">
				<view class="input-wrap" >
					<view class="content">
						<input type="text" v-model="formObj.nickname" :placeholder="$lang('name')" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" v-show="tabIndex == 1">
					<view class="content">
						<view class="area-code" @click="$refs.countryPopup.open()">
							<view class="h6">
								<text>{{selectObj.short}}</text>
								<text style="margin-left:12rpx;">+{{selectObj.tel}}</text>
							</view>
							<image src="/static/icon/icon_down_01.png" class="down-icon" mode=""></image>
						</view>
						<input type="number" v-model="formObj.mobile" :placeholder="$lang('tip1')" placeholder-class="input-placeholder" class="input" maxlength="11"  />
					</view>
				</view>
				<view class="input-wrap" v-show="tabIndex == 2">
					<view class="content">
						<input type="text" v-model="formObj.email" :placeholder="$lang('tip2')" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" >
					<view class="content">
						<input type="password" v-model="formObj.password" :placeholder="$lang('tip3')" maxlength="8" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" >
					<view class="content">
						<input type="password" v-model="formObj.pay_password" :placeholder="$lang('tip4')" maxlength="6" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap" >
					<view class="content">
						<input type="text" v-model="formObj.source_member" :placeholder="$lang('tip5')" placeholder-class="input-placeholder" class="input"  />
					</view>
				</view>
				<view class="input-wrap">
					<view class="content">
						<input type="text" :placeholder="$lang('tip6')" placeholder-class="input-placeholder" class="input" v-model="formObj.captcha_code" />
						<image :src="captcha.img" class="captcha" @click="getCaptcha"></image>
					</view>
				</view>
			</view>
			
			<view class="btn_view"><button type="primary" @click="submitForm()" class="login-btn color-base-border color-base-bg">
        {{ $lang('registered') }}</button></view>
			<view class="regisiter-agreement">
        {{ $lang('tip7') }}
				<text class="color-base-text" @click="openPopup">《 {{ $lang('registrationAgreement') }}》</text>
			</view>
			
			
		</view>
		
		<uni-popup ref="registerPopup" type="right" :maskClick="false">
			<view class="register-popup">
				<view class="shops-left" @click.stop="$refs.registerPopup.close()">
					<image  src="/static/icon/arrow_left_01.png" class="arrow-l" mode=""></image>
					<view class="shops-header-title">{{regisiterAgreement.title}}</view>
				</view>
				<view class="con">
					<scroll-view scroll-y="true" class="con"><rich-text :nodes="regisiterAgreement.content"></rich-text></scroll-view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 区号弹框 -->
		<uni-popup ref="countryPopup" type="right" :mask-click="true">
			<view class="country-popup">
				<view class="shops-header-box">
					<view class="shops-header">
						<view class="shops-left" @click.stop="$refs.countryPopup.close()">
							<image  src="/static/icon/arrow_left_01.png" class="arrow-l" mode=""></image>
							<view class="shops-header-title">{{ $lang('chooseAnAreaCode') }}</view>
						</view>
						<view class="shops-right" ></view>				
					</view>
					<view class="search-wrap uni-flex uni-row">
						<view class="flex-item input-wrap">
							<input class="uni-input" maxlength="50" v-model="keyword" confirm-type="search" @confirm="searchFn()" :placeholder="$lang('tip8')" />
							<text class="iconfont iconsousuo1" @click.stop="searchFn()"></text>
						</view>
					</view>
				</view>
				<view class="country-ul">
					<view class="country-li" v-for="(obj,l) in countryArr" :key="l" @click.stop="selectFn(obj,l)">
						<view class="li-name">
							<text >{{obj.name}} <text class="h6">+{{obj.tel}}</text></text>
							<image v-show="selectIndex == obj.tel" src="/static/icon/icon_select_01.png" class="sel-icon" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		
		
		<loading-cover ref="loadingCover"></loading-cover>
		<register-reward ref="registerReward"></register-reward>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import validate from 'common/js/validate.js';
	import registerReward from '@/components/register-reward/register-reward.vue';
	import auth from 'common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
export default {
  mixins:[globalConfig],
	data() {
		return {
			formObj: {
				mobile: '', // 手机号
				password: '', // 密码
				nickname: '', // 姓名 
				email: '',  // 邮箱
				source_member: '', //邀请人uid
				pay_password: '', // 支付密码
				captcha_code: '', // 验证码
				phone_code: '86',
				captcha_id: '',
			},
			countryArr: [],
			selectIndex: 86,
			selectObj: {
				short: 'CN',
				tel: 86
			},
			dynacodeData: {
				seconds: 60,
				timer: null,
				codeText: this.$lang('tip9'),
				isSend: false
			},
			tabIndex: 1,
			captcha: {
				// 验证码
				id: '',
				img: ''
			},
			regisiterAgreement: {
				// 注册协议
				title: '',
				content: ''
			},
			back: '', // 返回页
			keyword: '',
			copyCountry: [],
		};
	},
	components: {
		uniPopup,
		registerReward
	},
	onLoad(option) {
		if (option.back) this.back = option.back;
		if(option.uid) this.formObj.source_member = option.uid;
		this.getCaptcha();
		this.getCountry();
		this.getRegisiterAggrement();
	},
	onReady(){
		if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
	},
	onShow() {

	},
	methods: {
		searchFn(){
			let keyword = this.keyword.trim();
			if(!keyword){
				this.countryArr = this.copyCountry;
			}
			this.countryArr = this.copyCountry.filter(v=>{
				if(v.name.includes(keyword) ){
					return v;
				} 
			})
		},
		/**
		 * 去登录
		 */
		toLogin() {
			if (this.back)
				this.$util.redirectTo('/pages/login/login/login', {
					back: this.back
				});
			else this.$util.redirectTo('/pages/login/login/login');
		},
		/**
		 * 获取注册协议
		 */
		getRegisiterAggrement() {
			this.$api.sendRequest({
				url: '/api/register/aggrement',
				success: res => {
					if (res.code >= 0) {
						this.regisiterAgreement = res.data;
					}
				}
			});
		},
		/**
		 * 展示注册协议
		 */
		openPopup() {
			this.$refs.registerPopup.open();
		},
		/**
		 * 点击关闭协议
		 */
		toClose() {
			this.$refs.registerPopup.close();
		},
		// 获取区号
		getCountry(){
			this.$api.sendRequest({
				url: '/api/register/countrylist',
				method: 'get',
				success:res=>{
					if(res.code == 0){
						this.copyCountry = this.countryArr = res.data;
					}
				}
			})
		},
		// 选择区号
		selectFn(obj,index){
			this.selectObj = obj;
			this.selectIndex = obj.tel;
			this.formObj.phone_code = obj.tel;
			this.$refs.countryPopup.close()
		},
		// 切换tab
		setTab(type){
			this.tabIndex = type;
			if(type == 1){
				this.formObj.mobile = '';
			}else {
				this.formObj.email = '';
			}
		},
		/**
		 * 获取验证码
		 */
		getCaptcha() {
			this.$api.sendRequest({
				url: '/api/captcha/captcha',
				data: {
					captcha_id: this.captcha.id
				},
				success: res => {
					if (res.code >= 0) {
						this.captcha = res.data;
						this.captcha.img = this.captcha.img.replace(/\r\n/g, '');
						this.formObj.captcha_id = res.data.id;
					}
				}
			});
		},
		// 检验
		handleCheck(){
			if(!this.formObj.nickname){
				return this.$util.showToast({title: this.$lang('tip10')})
			}
			if(!this.formObj.mobile && this.tabIndex == 1){
				return this.$util.showToast({title: this.$lang('tip11')})
			}
			if(!this.formObj.email && this.tabIndex == 2){
				return this.$util.showToast({title: this.$lang('tip12')})
			}
			if(!this.formObj.email.includes('@') && this.tabIndex == 2){
				return this.$util.showToast({title: this.$lang('tip13')})
			}
			if(!this.formObj.password){
				return this.$util.showToast({title: this.$lang('tip14')})
			}
			let regNumber = /^\+?[1-9][0-9]*$/; // 正整数
			if(!this.formObj.pay_password){
				return this.$util.showToast({title: this.$lang('tip15')})
			}
			if(!regNumber.test(this.formObj.pay_password)){
				return this.$util.showToast({title: this.$lang('tip16')})
			}
			// if(!this.formObj.source_member){
			// 	return this.$util.showToast({title: this.$lang('tip17')})
			// }
			if(!this.formObj.captcha_code){
				return this.$util.showToast({title: this.$lang('tip6')})
			}
			return true;
		},
		// 提交注册
		submitForm(){
			if(this.handleCheck() !== true){
				return false;
			}
			uni.showLoading({
				mask: true,
				title:'Loading...'
			})
			console.log(JSON.stringify(this.formObj))
			this.$api.sendRequest({
				url: this.tabIndex == 1? '/api/register/register': '/api/register/email',
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						uni.removeStorageSync('loginLock');
						uni.removeStorageSync('unbound');
						uni.removeStorageSync('authInfo');
						uni.setStorageSync('token',res.data.token);
						this.$util.showToast({title: this.$lang('tip18')})
						setTimeout(()=>{
							let url = this.back ? decodeURIComponent(this.back) : '/pages/member/index/index'
							uni.reLaunch({
								url: url,
							})									
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				},
				fail:err=>{
					uni.hideLoading()
				}
			})
		},
	}
};
</script>

<style lang="scss">
@import '../public/css/common.scss';
	
	page {
		background: #fff;
	}
	
</style>

<style scoped lang="scss">
	.header-wrap {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}
	.header-reg {
		width: 100%;
		.reg-tab {
			width: 86%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			.tab {
				font-size: 30rpx;
				color: #909399;
				margin-right: 40rpx;
			}
			.tab-act {
				color: #31bb6d;
				font-weight: 500;
			}
		}
	}
	
	.body-wrap {
		margin-top: 70rpx;
		.form-wrap {
			width: 86%;
			.input-wrap {
				.content {
					.area-code {
						display: flex;
						align-items: center;
						.h6 {
							font-size: 28rpx;
							color: #303133;
						}
						.down-icon {
							width: 24rpx;
							height: 24rpx;
							display: block;
							margin-left: 12rpx;
						}
					}
				}
			}
		}	
	}
	
	
	
	.country-popup {
		width: 100%;
		background: #F8F7FC;
		
		// height: auto;
		overflow: auto;
		.shops-header-box {
			width: 100%;
			// height: 88rpx;
			background: #fff;
			padding: 0px 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			.shops-header {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.shops-left {
					display: flex;
					align-items: center;
					.shops-header-title {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #292929;
						line-height: 50rpx;
						margin-left: 6rpx;
					}
				}
				.shops-right {
					display: flex;
					align-items: center;
					.home-icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 12rpx;
					}
					.to-home {
						font-size: 26rpx;
						color: #31bb6d;
					}
				}
			}	
			
			.search-wrap {
				flex: 0.5;
				padding: 30rpx 30rpx;
				font-size: $font-size-tag;
				display: flex;
				align-items: center;
				.input-wrap {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background: $color-bg;
					height: 70rpx;
					padding-left: 10rpx;
					border-radius: 70rpx;
					input {
						width: 90%;
						background: $color-bg;
						font-size: $font-size-tag;
						height: 50rpx;
						padding: 10rpx 25rpx 10rpx 40rpx;
						line-height: 50rpx;
						border-radius: 40rpx;
					}
					text {
						font-size: $font-size-toolbar;
						color: $color-tip;
						width: 80rpx;
						text-align: center;
						margin-right: 20rpx;
					}
				}
				
			}
			
		}
		.country-ul {
			height: 100vh;
			// padding-top: 100rpx;
			overflow: auto;
			.country-li {
				width: 100%;
				background: #fff;
				padding: 0px 32rpx;
				box-sizing: border-box;
				.li-name {
					width: 100%;
					height: 110rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #E8EDF5;
					text {
						font-size: 32rpx;
						color: #353535;
						.h6 {
							margin-left: 15rpx;
							color: #92969E;
						}
					}
					.sel-icon {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
	
	.register-popup {
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding: 30rpx 34rpx;
		box-sizing: border-box;
		overflow: auto;
		.shops-left {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;
			.shops-header-title {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
				line-height: 50rpx;
				margin-left: 6rpx;
			}
		}
	}
	
</style>
